---
title: Emoji
description: Insert emoji inline.
docs:
  - route: /docs/components/emoji-input-element
    title: Emoji Input Element
  - route: /docs/components/emoji-dropdown-menu
    title: Emoji Dropdown Menu
  - route: /docs/components/emoji-toolbar-dropdown
    title: Emoji Toolbar Dropdown
---

<ComponentPreview name="playground-demo" id="emoji" />

<PackageInfo>

## Features

- Insert emoji inline.
- Use the **`:`** shortcut followed by the emoji name (e.g., **`:apple:`** 🍎). Autocomplete suggestions appear as you type.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-emoji
```

## Usage

```tsx
import { EmojiPlugin } from '@udecode/plate-emoji/react';

const plugins = [
  // ...otherPlugins,
  EmojiPlugin,
];
```

## Plugins

### EmojiPlugin

Extends [TriggerComboboxPlugin](/docs/combobox#options)

<APIOptions>
<APIItem name="createEmojiNode" type="(emoji: TEmoji): ElementOrTextOf<any>" optional>
  A function to specify the node inserted when an emoji is selected. The default behavior is to insert a text node containing the emoji as a Unicode character.
</APIItem>
</APIOptions>

### EmojiInputPlugin

Handles the input behavior for emoji insertion.